<template>
  <div style="height:100%;">
    <div class="phm-tanc-top toptitle"><span class="top-title">3C</span>
      <div class="toptitle-input">
        <p class="form-top-p">
          <el-select v-model="valuek.time" clearable placeholder="选择时间">
            <el-option
              v-for="item in datatime"
              :key="item.detectDate"
              :label="item.detectDate"
              :value="item.detectDate" />
          </el-select>
        </p>
      </div>
    </div>
    <div v-loading="loading" class="analysisContainer" style="height:calc(100% - 42px);">
      <div class="img4c" />
    </div>
  </div>
</template>

<script>
import { find2CLateralAnalysis } from '@/api/cms/data-statistics'
export default {
  name: 'Transverse4C',
  props: {
    datatime: {
      type: Array,
      default: () => []
    },
    params: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      responseData: {},
      partImgArr: [],
      globalImgArr: [],
      currentIndex: 0,
      checknum: 0,
      imgurl: '',
      valuek: {
        time: '',
        switch: true
      },
      loading: false,
      queryParams: {}
    }
  },
  watch: {
    'valuek.switch': function(val) {
      this.$refs.imglist.scrollTop = 0
      this.checknum = 0
      if (val) {
        this.imgurl = this.globalImgArr[0]
      } else {
        this.imgurl = this.partImgArr[0]
      }
    },
    'valuek.time': function(val) {
      this.responseData = {}
      this.partImgArr = []
      this.globalImgArr = []
      this.imgurl = ''
      if (val && val !== '') {
        // 1C锚段才有时间轴
        this.queryParams = Object.assign({}, this.params, {
          lineCode: this.params.selectLin.split('-')[1],
          lineSiteCode: this.params.lineSiteCode.split('-')[0],
          deptName: this.params.deptCode.split('-')[1],
          detectDate: val
        })
        this.getC1DataByParams(this.queryParams)
      }
    },
    datatime() {
      this.valuek.time = ''
    }
  },
  mounted() {
  },
  methods: {
    next() {
      const list = this.valuek.switch ? this.globalImgArr : this.partImgArr
      if (this.checknum >= list.length - 1) return
      this.checknum++
      this.$refs.imglist.scrollTop = `${this.checknum * 80}`
      this.imgurl = list[this.checknum]
    },
    prev() {
      const list = this.valuek.switch ? this.globalImgArr : this.partImgArr
      if (this.checknum === 0) return
      this.checknum--
      this.$refs.imglist.scrollTop = `${this.checknum * 80}`
      this.imgurl = list[this.checknum]
    },
    changeurl(val, index) {
      this.checknum = index
      this.imgurl = val
    },
    getImgList(min) {
      this.partImgArr = []
      this.globalImgArr = []
      const partPath = this.responseData.partBeginPath.slice(0, this.responseData.partBeginPath.lastIndexOf('/'))
      const panoramisPath = this.responseData.panoramisBeginPath.slice(0, this.responseData.panoramisBeginPath.lastIndexOf('/'))
      const max = this.responseData.endFrameNo
      for (let i = min; i <= max; i++) {
        this.partImgArr.push(this.getImgSrc(partPath, i))
        this.globalImgArr.push(this.getImgSrc(panoramisPath, i))
      }
      this.imgurl = this.partImgArr[0]
    },
    getImgSrc(path, index) {
      return `${path}/${index}.jpg`
    },
    getC1DataByParams(param) {
      this.loading = true
      find2CLateralAnalysis(param).then(response => {
        this.loading = false
        if (response.data) {
          this.responseData = response.data
          this.currentIndex = this.responseData.startFrameNo
          this.getImgList(this.currentIndex)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-title{
  display: inline-block;
  width: 38px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background:white;
  border-radius: 4px;
  font-size: 18px;
  color: #409eff;
}
  .analysisContainer {
    overflow: auto;
    color: black;

    .form-button {
      float: none;
    }

    .analysisChartGroup {
      position: relative;
      z-index: 1;
      height: 100%;
    }

    .phwidth {
      display: inline-block;
      width: 150px;
    }
  }
.toptitle{
  height: 42px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 10px;
  background-image: linear-gradient(#F3F5FF, #DFE6FF);
  color: black;
  img{
    height: 14px;
    margin-right: 8px;
  }
}
.form-top-p{
  margin: 0;
  ::v-deep .el-input__icon{
    line-height: 28px;
  }
}
.toptitle-input{
  margin-left: 20px;
  width: 100%;
  display: flex;
  align-items: center;
}
.img4c{
  display:flex;
  height: 100%;
  overflow: hidden;
  .left{
    flex: 1;
    height: 100%;
    .el-image{
      height: 100%;
      width: 100%;
    }
  }
  .right{
    width: 140px;
    position: relative;
    height:calc(100%);
    border-left: solid 1px #aed0ea;
    .topbtn{
      position: absolute;
      height: 16px;
      width: 100%;
      text-align: center;
      color: white;
      background: #aed0ea;
      top: 0;
    }
    .bottombtn{
      position: absolute;
      height: 16px;
      width: 100%;
      color: white;
      text-align: center;
      background: #aed0ea;
      bottom: 0;
    }
    .imglist{
      margin: 16px 0;
      height: 100%;
      width: 100%;
      overflow-y: auto;
      .img4c-item{
      height: 80px;
      width: 100%;
      border-bottom: solid 1px #aed0ea;
      img{
        height: 100%;
        width: 100%;
      }
      .active{
        border: solid 1px black;
      }
    }
    }
    .imglist::-webkit-scrollbar:hover,
    .imglist::-webkit-scrollbar {
        width: 0;
      }
  }
}
</style>
